body {
    width: 85%;
    margin: 0 auto;
}
h1 {
    text-align: center;
}

.flexbox {
    display: flex;
background-color: rgb(238, 201, 201);
flex-direction: row;
}
.flexbox p {
    border:1px rgb(255, 255, 255) solid; 
    border-radius: 6px;
    margin-left: 10px;
    background-color:  seashell;
}
.flexbox p:last-child {
    margin-right: 10px;
}

.flexbox1 {
    display: flex;
background-color: rgb(238, 222, 201);
flex-direction: row-reverse;
}
.flexbox1 p {
    border:1px rgb(255, 255, 255) solid; 
    border-radius: 6px;
    margin-left: 10px;
    background-color: seashell;
}
.flexbox01 p:last-child {
    margin-right: 10px;
}

.flexbox01 {
    display: flex;
background-color: rgb(236, 182, 184);
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.flexbox01 p {
    text-align: center;
    font-size: 20px;
    color: rgb(255, 248, 236);
    border:1px rgb(255, 255, 255) solid; 
    border-radius: 6px;
    margin-left: 10px;
    flex-basis: 200px;
}
.flexbox01 p:last-child {
    margin-right: 10px;
}

.flexbox2 {
    display: flex;
background-color: rgb(238, 201, 201);
flex-direction: column;
}
.flexbox2 p {
    border:1px rgb(255, 255, 255) solid; 
    border-radius: 6px;
    margin-left: 10px;
    text-align: center
}
.flexbox2 p:last-child {
    margin-right: 10px;
}

.flexbox3 {
    display: flex;
background-color:  rgb(238, 222, 201);
flex-direction: column-reverse;
}
.flexbox3 p {
    border:1px rgb(255, 255, 255) solid; 
    border-radius: 6px;
    margin-left: 10px;
    text-align: center
}
.flexbox3 p:last-child {
    margin-right: 10px;
}

.flexbox4 {
    display: flex;
background-color: rgb(238, 201, 201);
flex-wrap: wrap;
}
.flexbox4 p {
    border:1px rgb(255, 255, 255) solid; 
    border-radius: 6px;
    margin-left: 10px;
    font-size: 20px;

}
.flexbox4 p:last-child {
    margin-right: 10px;
}

.flexbox5 {
    display: flex;
background-color:  rgb(238, 201, 201);
flex-wrap: wrap-reverse;
justify-content: center;
/* align-content: flex-end; */
align-items: baseline;
}
.flexbox5 p {
    border:1px rgb(202, 169, 169) solid; 
    color: rgb(255, 255, 255);
    border-radius: 6px;
    margin-left: 10px;
    font-size: 20px;
}
.flexbox5 p:last-child {
    margin-right: 10px;
}

.flexbox6 {
    display: flex;
background-color:  rgb(238, 201, 201);
height: 150px;
align-items: flex-start;
}
.flexbox6 p {
    border:1px rgb(202, 169, 169) solid; 
    color: rgb(255, 255, 255);
    border-radius: 6px;
    margin-left: 10px;
}
.box1 {
width: 100px;
height: 50px;
font-size: 20px;
}
.box2{
width: 100px;
height: 100px;
font-size: 50px;
}
.box3{
    width: 80px;
    height: 90px;
    font-size: 30px;
}

.flexbox7 {
    display: flex;
background-color:  rgb(238, 201, 201);
height: 150px;
align-items: center;
}
.flexbox7 p {
    border:1px rgb(202, 169, 169) solid; 
    color: rgb(255, 255, 255);
    border-radius: 6px;
    margin-left: 10px;
}
.flexbox8 {
    display: flex;
background-color:  rgb(238, 201, 201);
height: 150px;
align-items: baseline;
}
.flexbox8 p {
    border:1px rgb(202, 169, 169) solid; 
    color: rgb(255, 255, 255);
    border-radius: 6px;
    margin-left: 10px;
}


.column {
column-count: 3;
column-gap: 100px;
column-rule: tan 4px solid;
}
.column-span {
    column-span: all;
}

.column p {
    border: rgb(255, 250, 240) 1px solid;
}

.break-avoid {
    break-inside: avoid;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
}
.grid p {
    font-size: 20px;
    text-align: center;
    border: thistle 1px dashed;
}
/* 导航栏部分 */
.container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
    grid-template-areas:
        "header header"
        "content sidebar"
        "footer footer";
}

.header1 {
    grid-area: header;
    color: chocolate;
    border-radius: 5px;
    padding: 10px;
    background-color: rgb(240, 247, 255);
    width: 15%;
}

article {
    grid-area: content;
}

aside {
    grid-area: sidebar;
}

footer {
    grid-area: footer;
}

.footer1 {
    border-radius: 5px;
    padding: 10px;
    color: white;
    background-color: rgb(206, 205, 205);
    font-size: small;
    /* border: 2px solid rgba(227, 84, 79, 0.692); */
}

aside {
    border-left: 5px solid rgb(138, 99, 99);
    padding-left: 10px;
}
/* 导航栏部分 */

footer {
    text-align: center;
    color: rgb(231, 195, 150);
    font-size: 16px;
    font-family: "微软雅黑";
    letter-spacing: 2px;
    }

    span {
    margin-left: 2em;